<template>
    <div class="profile-coupon">
        <div class="header">待使用的优惠卷</div>
        <div class="body row">
            <div class="item" v-for="(item, index) in coupons" :key="index">
                <CouponItem :item="item" />
            </div>
        </div>
    </div>
</template>

<script>
import CouponItem from "./couponItem";
export default {
    components: {
        CouponItem
    },
    data() {
        return {
            couponList: [
                {
                    title: "麦当劳专享受红包",
                    type: "reduce",
                    reduce: 5,
                    limit: 40,
                    expireTime: new Date().getTime(),
                    effectiveTime: new Date().getTime(),
                    des: "限外卖订单使用"
                },
                {
                    title: "麦当劳专享受红包",
                    type: "reduce",
                    reduce: 5,
                    limit: 40,
                    expireTime: new Date().getTime(),
                    effectiveTime: new Date().getTime(),
                    des: "限外卖订单使用"
                },
                {
                    title: "麦当劳专享受红包",
                    type: "reduce",
                    reduce: 5,
                    limit: 40,
                    expireTime: new Date().getTime(),
                    effectiveTime: new Date().getTime(),
                    des: "限外卖订单使用"
                },
                {
                    title: "麦当劳专享受红包",
                    type: "reduce",
                    reduce: 5,
                    limit: 40,
                    expireTime: new Date().getTime(),
                    effectiveTime: new Date().getTime(),
                    des: "限外卖订单使用"
                }
            ]
        };
    },
    computed: {
        coupons() {
            return this.$store.state.userInfo.coupons;
        }
    },

    methods: {}
};
</script>


<style lang="less" scoped>
.profile-coupon {
    background: #fff;
    width: 100%;
    box-sizing: border-box;
    padding: 0 30px 20px 30px;
    margin-bottom: 20px;

    .header {
        padding: 20px 0 0 0;
        font-size: 28px;
    }
    .body {
        padding: 30px 0 30px 0;
        width: 100%;
        min-height: 100px;
        overflow-x: scroll;

        &::-webkit-scrollbar {
            display: none;
        }

        .item {
            margin-right: 35px;
        }
    }
}
</style>